<template>
  <div class="tiaoxin">
    <el-row type="flex" align="bottom">
      <div>
        <el-avatar v-if="userInfo.staffPhoto" :size="size" :src="userInfo.staffPhoto" />
        <span v-else class="tiileDefult">{{ String(userInfo.username).slice(2,3) }}</span>
      </div>
      <div style="margin-left: 20px;margin-bottom: 20px;">部门：</div>
    </el-row>
    <el-row>

      <div>
        <div style="margin-left: 120px;margin-bottom: 20px;">入职时间：</div>
      </div>
    </el-row>
    <hr>
    <el-row style="margin-top: 20px;">
      <el-form label-position="right" label-width="120px">
        <el-form-item label="调整基本工资">
          <el-input style="width: 120px;" disabled :value="formData.currentBasicSalary" /> ->
          <el-input v-model="addForm.currentBasicSalary" style="width: 120px;" />
        </el-form-item>
        <el-form-item label="调整岗位工资">
          <el-input style="width: 120px;" disabled :value="formData.currentPostWage" /> ->
          <el-input v-model="addForm.currentPostWage" style="width: 120px;" />
        </el-form-item>
        <el-form-item label="工资合计">
          <el-input style="width: 120px;" :value="totalCurrent" disabled /> ->
          <el-input style="width: 120px;" disabled :value="addTotalCurrent" />
        </el-form-item>
        <el-form-item label="调整幅度">
          <el-input style="width: 120px;" disabled :value="sumTotal" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="btnOK">确认</el-button>
          <el-button @click="btnCancel">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getSalarysModify, saveSalarysModify } from '@/api/salarys'
import { getEmployeeDetail } from '@/api/employee'
export default {
  props: {
    userid: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      size: 100,
      formData: {
        currentPostWage: 0,
        currentBasicSalary: 0
      },
      addForm: {
        currentBasicSalary: 0,
        currentPostWage: 0
      },
      userInfo: {}
    }
  },
  computed: {
    totalCurrent() {
      return this.formData.currentBasicSalary + this.formData.currentPostWage
    },
    addTotalCurrent() {
      return Number(this.addForm.currentBasicSalary) + Number(this.addForm.currentPostWage)
    },
    sumTotal() {
      return this.addTotalCurrent - this.totalCurrent
    }

  },
  created() {
    this.getSalarysModify()
    this.getUserInfo()
  },
  methods: {
    async btnOK() {
      console.log('ok')

      try {
        await saveSalarysModify({ ...this.addForm, userId: this.userid })
        this.$message.success('调薪成功')
        this.btnCancel()
        // console.log(res)
      } catch (err) {
        // console.log(err.response.data.message)
        this.$message.error(err.response.data.message)
      }
    }, btnCancel() {
      this.$emit('closeDialog', false)
    },
    async getSalarysModify() {
      const res = await getSalarysModify(this.userid)
      console.log('getSalarysModify', res)
      this.formData = res
    },
    async getUserInfo() {
      const res = await getEmployeeDetail(this.userid)
      console.log('getUserInfo', res)
      this.userInfo = res
    }
  }

}
</script>

<style>
    .tiaoxin {
        padding-left: 20;
        padding-bottom: 20;
    }

    .tiileDefult {
        display: inline-block;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #8df;

        text-align: center;
        line-height: 100px;
        color: #fff;
        font-size: 40px;
    }
</style>
